<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<style type="text/css">
		body {
			background-color: #FFFFFF;
		}

		#left,
		#right {
			background-color: #ffffff;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		#right {
			background-color: transparent;
		}

		.aui-list .aui-list-item-inner {
			min-height: 2.75rem;
			font-size: 0.7rem;
			display: inline-block!important;
			line-height: 2.75rem;
			padding-right: 0;
		}

		.aui-list .aui-list-item {}

		.aui-active {
			position: absolute;
			width: 0.2rem;
			height: 0.9rem;
			left: 0;
			top: calc(50% - 0.45rem);
			background-color: rgba(114, 213, 239, 1);
		}

		.aui-text-linears {
			position: relative;
			background: linear-gradient(-152deg, #ee02fd, #9972e6);
			background: -webkit-linear-gradient(-152deg, #ee02fd, #9972e6);
			color: rgba(114, 213, 239, 1)!important;
			-webkit-background-clip: text;
			-webkit-text-fill-color: #72D5EF;
			font-weight: 500!important;
		}

		.active_left_linears {
			font-family: PingFangSC-Medium!important;
			font-weight: 500!important;
			color: rgba(114, 213, 239, 1)!important;
		}

		.type-img {
			width: calc( (75vw - 20px)/3 - 20px);
			height: calc( (75vw - 20px)/3 - 20px);
			object-fit: cover;
		}
		/*每一项*/

		.classitem {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			font-family: PingFangSC-Regular;
			font-size: 0.65rem;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.classitem:after {
			content: "";
			flex: auto;
		}

		.btn_refresh {
			width: 10rem;
			height: 2rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1.23rem;
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			margin: 0 auto;
			margin-top: 2rem;
			line-height: 2rem;
			text-align: center;
		}

		#left,
		#right {
			background-color: #ffffff;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		#right {
			background-color: transparent;
		}

		.aui-list .aui-list-item-inner {
			min-height: 2.5rem;
			font-size: 0.7rem;
			display: inline-block!important;
			line-height: 2.5rem;
			padding-right: 0;
		}

		.aui-list .aui-list-item {
			padding-left: 0;
			text-align: center;
			background-color: #FAFAFA;
		}

		.aui-list-item .aui-active {
			position: absolute;
			left: 0;
			top: 50%;
			border-left: 3px solid RGBA(227, 0, 255, 1);
			height: 0.7rem;
			transform: translateY(-50%);
		}

		.type-img {
			width: calc( (75vw - 20px)/3 - 10px);
			height: calc( (75vw - 20px)/3 - 10px);
			object-fit: cover;
		}
	</style>
</head>

<body>
	<div class="aui-content">
		<div class="aui-row" id="app" v-cloak="">
			<template id="" v-if="isnetwork">
			<!-- 分类左侧栏 -->
			<div class="aui-col-xs-4" id="left" style="border-bottom:0.05rem solid #EEEEEE;margin-top:0;width:auto;background:rgba(248,248,248,1);">
				<ul class="aui-list aui-list-noborder" id="leftTab">
					<li style="position:relative;border-bottom:1px solid rgba(238,238,238,0.5);;padding-left: 0;text-align: center;background-color: #FAFAFA;width:5.5rem!important;height:2.75rem!important;"  v-for="vo in parent_info" class=""  :id="'left-'+vo.id" :class="{'ming-bg-white':active_id==vo.id}" tapmode @click="get_list(vo.id)">
						<div v-if="active_id==vo.id" class="aui-active ming-pr">
							<!-- &nbsp; -->
						</div>
						<div class="aui-list-item-inner" style="">
							<span class="" :class="{'active_left_linears':active_id==vo.id}" style="font-size:0.7rem;color:rgba(50,50,51,1);font-family:PingFangSC-Regular;font-weight:400;">{{vo.name}}</span>
						</div>
					</li>
				</ul>
			</div>

			<!-- 右侧分类栏 -->
			<div class="aui-col-xs-8 ming-bg-white" id="right">
				<div>

					<div class="classitem" style="margin-top:0.35rem;text-align:center;">
						<div v-for="item in info" tapmode @click="open_class_goods_list(item.id)" class="" style="margin-left:1rem;">
							<img class="" :src="item.icon_path" / style="width:3rem;height:3rem;border-radius:0.1rem;">
							<div class="" style="font-size:0.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);margin-top:0.5rem;margin-bottom:1rem;">
								{{item.name}}
							</div>
						</div>
					</div>
				</div>
				<!-- <div v-if="info.length>1" class="aui-text-center aui-font-size-14 ming-text-hui" style="margin-top: 4rem;padding-bottom: 1rem;">
					已经到底了
				</div> -->
			</div>
			</template>

			<template id="" v-else style="height:100%;text-align:center">
					<img src="../image/icon/nonetwork.png" alt="" style="width:5.5rem;margin:11.4rem auto;margin-bottom:0.5rem;">
					<div class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);line-height:1.05rem;text-align:center;">
						暂无网络
					</div>
					<div class="btn_refresh" tapmode onclick="refresh_network()">
						刷新
					</div>
				</template>





		</div>
	</div>
</body>
<script type=" text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript " src="../script/common.js "></script>
<script type="text/javascript ">
	function open_class_goods_list(id) {
		$api.setStorage('good_type_id', id)
		open_win('goods_list', 'goods/goods_list.html', false)
	}
	var vm = new Vue({
		el: '#app',
		data: {
			info: [],
			id: 0,
			active_id: 0,
			isnetwork: true,
			parent_info:[]
		},
		methods: {
			get_list: function(id) {
				get_data('api/GoodType/goodType', {
					token: $api.getStorage('token'),
					id: id,
				}, function(ret) {
					 console.log(JSON.stringify(ret))
					if (ret.status) {
						vm.info = ret.data
						//vm.active_id = vm.info[0].id
					}
				})
			},
			init(){
				get_data('api/GoodType/goodTypeParent', {
					token: $api.getStorage('token'),
				}, function(ret) {
					 console.log(JSON.stringify(ret))
					if (ret.status) {
						vm.parent_info = ret.data
						//vm.active_id = vm.info[0].id
					}
				})
			}
		}
	})
	apiready = function() {
		//var id =64;
		vm.init()
		add_event('class_ref', function(ret) {
			vm.init()
		})
		isOnLineStatus();
	};

	function move_to(id) {
		var data_id = 'right-' + id;
		document.getElementById("right").scrollTop = document.getElementById("right").scrollTop + $api.offset($api.byId(data_id)).t
	}
	document.getElementById("right").onscroll = function() {
		//			console.log(document.getElementById("right").scrollTop+'/'+ document.getElementById("right").scrollHeight + '/' +document.getElementById("right").clientHeight)
		var isbottom = document.getElementById("right").scrollHeight - document.getElementById("right").scrollTop - document.getElementById("right").clientHeight;
		if (isbottom < 30) {
			vm.active_id = vm.info[vm.info.length - 1].id
			move_to_left(vm.active_id)
			return;
		}
		for (var i = 0; i < vm.info.length; i++) {
			var data_id = 'right-' + vm.info[i].id;
			var data_id1 = 'right-' + vm.info[i].id;
			if (i > 1) {
				var data_id1 = 'right-' + vm.info[i - 1].id;
			}
			if ($api.offset($api.byId(data_id)).t < 10 && $api.offset($api.byId(data_id)).t >= 0) {
				vm.active_id = vm.info[i].id
				move_to_left(vm.active_id)
				break;
			}
			if ($api.offset($api.byId(data_id)).t > 10 && (-$api.offset($api.byId(data_id1)).t) < $api.offset($api.byId(data_id1)).h) {
				// vm.active_id = vm.info[i - 1].id
				move_to_left(vm.active_id)
				break;
			}
		}
	}


	function move_to_left(id) {
		var data_id = 'left-' + id;
		document.getElementById("left").scrollTop = document.getElementById("left").scrollTop + $api.offset($api.byId(data_id)).t
	}


	function refresh_network() {
		vm.init()
		send_event('reflesh_network');
		var flag = true;
　　　　function once() {
　　　　　　if (flag) {
　　　　　　　　window.location.reload()
　　　　　　　　flag = false;
　　　　　　} else {
　　　　　　　　return;
　　　　　}
　　　　}
　　　　once();
	}

	function isOnLineStatus() {
		var s = api.connectionType;
		var count = 0;
		s = s.toLowerCase();
		if ((s.indexOf('wifi') != -1) || (s.indexOf('3g') != -1) || (s.indexOf('4g') != -1) || (s.indexOf('2g') != -1)) {
			//callback(true, s);
			vm.isnetwork = true

		} else {
			vm.isnetwork = false
		}
	}
</script>

</html>
